import React, { useState } from 'react'
import styleLogin from './style.module.less'
import { Input, Cell, Checkbox, Button, Toast } from 'zarm';
import CustomIcon from '../../components/CoustomIcon';
import Captcha from 'react-captcha-code';
import { post } from '@/utils/index.js'
import { useNavigate } from 'react-router-dom'

export default function Login() {
    const [type, setType] = useState('login')
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    const [verify, setVerify] = useState('')//生成的验证码
    const [captcha, setCaptcha] = useState('')//输入的验证码

    const navigate = useNavigate()

    const onSubmit = async () => {
        if (!username) {
            Toast.show('请输入账号')
            return
        }
        if (!password) {
            Toast.show('请输入密码')
            return
        }

        if (type === 'login') { // 登录
            const { data } = await post('/api/user/login', {
                username,
                password
            })
            // console.log(data);
            localStorage.setItem('token', data.token)
            navigate('/')
        } else { // 注册
            if (!captcha || verify !== captcha) {
                Toast.show('验证码错误')
                return
            }

            await post('/api/user/register', {
                username,
                password
            })
            Toast.show('注册成功')
            setType('login')
        }
    }

    const verifyChange = (code) => {
        // console.log(code);
        setVerify(code)
    }
    return (
        <div className={styleLogin.auth}>
            <div className={styleLogin.head}>
                <div className={styleLogin.tab}>
                    <span className={type === 'login' ? styleLogin.active : ''} onClick={() => setType('login')}>登录</span>
                    <span className={type === 'register' ? styleLogin.active : ''} onClick={() => setType('register')}>注册</span>
                </div>
                <div className={styleLogin.form}>
                    <Cell icon={<CustomIcon type='icon-icon_zhanghao' />}>
                        <Input
                            clearable
                            type="text"
                            placeholder="请输入账号"
                            onChange={(value) => {
                                setUsername(value)
                            }}
                        />
                    </Cell>
                    <Cell icon={<CustomIcon type='icon-mima' />}>
                        <Input
                            clearable
                            type="text"
                            placeholder="请输入密码"
                            onChange={(value) => {
                                setPassword(value)
                            }}
                        />
                    </Cell>
                    {
                        type === 'register' ? <Cell icon={<CustomIcon type='icon-mima' />}>
                            <Input
                                clearable
                                type="text"
                                placeholder="请输入验证码"
                                onChange={(value) => {
                                    setCaptcha(value)
                                }}
                            />
                            <Captcha onChange={verifyChange}></Captcha>
                        </Cell> : null
                    }
                    <div className={styleLogin.operation}>
                        {
                            type === 'register' ? <div className={styleLogin.agree}>
                                <Checkbox></Checkbox>
                                <label htmlFor="" className='text-light'>阅读并同意条款</label>
                            </div> : null
                        }
                        <Button onClick={onSubmit} block theme="primary">{type === 'login' ? '登录' : '注册'}</Button>
                    </div>
                </div>
            </div>
        </div >
    )
}
